<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>学院搜索</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../plugin/layui-v2.2.5/layui/css/layui.css">
  <!-- 教师应交材料页面 -->
</head>
<body style="overflow-y: scroll;">
  <div class="layui-row" >
  	<div class="layui-col-md4">
	  <div class="layui-inline">
	  	<label class="layui-form-label">搜索粒度</label>
	  	<div class="layui-input-inline layui-form">
	      <select name="modules" lay-verify="required" lay-search="" lay-filter="granularity" id="granularity">
	  	    <option value="teacher">教师</option>
	        <option value="department">系</option>
	        <option value="academe">学院</option>
	  	  </select>
	  	</div>
	  </div>
  	</div>
  	<div class="layui-col-md4">
  	  <label class="layui-form-label">学期</label>          
	  <div class="layui-input-block layui-form">
            <select id="period" lay-verify="required" lay-search>
              <option value=""></option>
            </select>
      </div>
  	</div>
    <div id="selectedTeacher" class="layui-col-md4">
		<label class="layui-form-label">教师名称</label>    
		<div class="layui-input-inline layui-form">
	      <select name="academe_search" id="teacher_name"  style="width: 100px" lay-search></select>
	    </div>
    </div>
    <div id="selectedDepartment" class="layui-col-md4" style="display:none">
		<label class="layui-form-label">院系名称</label>    
	    <div class="layui-input-inline layui-form">
	      <select name="academe_search" id="department_name"  style="width: 100px" lay-search></select>
	    </div>
    </div>
    <div id="selectedAcademe" class="layui-col-md4" style="display:none">
		<label class="layui-form-label">课程名称</label>    
	    <div class="layui-input-inline layui-form">
	      <select name="course_search" id="course_name"  style="width: 100px" lay-search></select>
	    </div>
    </div>
    <button id="academeSearch_btn" data-method="search" class="layui-btn" style="float: right;margin-right: 65px;margin-top: 5px">搜索</button>
  </div>
  <div>
    <table class="layui-hide" id="academeGrid" lay-filter="academeGrid"></table>  
  </div>

          
<script src="../plugin/layui-v2.2.5/layui/layui.js"></script>
<script src="../plugin/jquery-3.1.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>


layui.use(['table','layer','upload','form'], function(){
  var table = layui.table;
  var form = layui.form;
  
//加载教师数据
  $.ajax({ 
	url: "/CMA/teacher/getAll",
	contentType: "application/x-www-form-urlencoded",
	type:"post",
	dataType : "json",
	success: function(data){
		//console.log(data.data.length);
		var optionData = data.data;
		var optionText = "<option value=''></option>";
		for(var i = 0; i < optionData.length; i++){
			optionText = optionText + "<option value="+optionData[i].teacherid+">"+optionData[i].name+"</option>";
		}
		//console.log("ss"+optionText);
		$("#teacher_name").append(optionText); 
		form.render('select');
      }
  });
  var granularity = "teacher";
  var period = null;
  //监听select
  form.on('select(granularity)', function(data){
	  granularity = data.value;
	  if(data.value=='department'){
		  $("#selectedTeacher").hide();
		  $("#selectedDepartment").show();
		  $("#selectedAcademe").hide();
	  }else if(data.value=='academe'){
		  $("#selectedTeacher").hide();
		  $("#selectedDepartment").hide();
		  $("#selectedAcademe").show();
	  }else{
		  $("#selectedTeacher").show();
		  $("#selectedDepartment").hide();
		  $("#selectedAcademe").hide();
	  } 
	  
	}); 
  
  $("#academeSearch_btn").on("click",function(){
	  period = $("#period").val();
	  console.log(granularity+"===="+period)
	  if(granularity == 'teacher'){
		  showTeacher(period);
	  }else if(granularity == 'academe'){
		  showAcademe(period);
	  }else{
		  showDepartment();
	  }
  })
  
  //根据粒度显示不同表格
  function showAcademe(period){
	  var course = $("#course_name").val();
	  console.log(course);
	  table.render({
		    elem: '#academeGrid'
		    ,url: '/CMA/courseDocument/getCountByCourse'
		    ,where: {
		    	"period" : period,
		    	"courseid" : course
		    }
		    ,method: 'post' 
		    ,done: function(res, curr, count){
		        //如果是异步请求数据方式，res即为你接口返回的信息。
		        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
		        console.log(res);
		      }
		    ,cols: [[ //标题栏
		      {field: 'courseName', title: '课程名'}
		      ,{field: 'alCount', title: '已交份数', sort: true}
		      ,{field: 'unCount', title: '未上交份数', sort: true}
		    ]]
		    ,skin: 'line' //表格风格
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [5, 7, 10]
		    ,limit: 5 //每页默认显示的数量 
		    ,id : "documentGrid"
		 })
  }
  
  function showTeacher(period){
	  var teacher = $("#teacher_name").val();
	  //console.log("teacher:"+$("#teacher_name").val()+"===period:"+$("#period").val());
	  table.render({
		    elem: '#academeGrid'
		    ,url: '/CMA/courseDocument/getDocumentBySearch'
		    ,where: {
		    	"period" : $("#period").val(),
		    	"teacherid" : teacher
		    }
		    ,method: 'post' 
		    ,done: function(res, curr, count){
		        //如果是异步请求数据方式，res即为你接口返回的信息。
		        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
		        console.log(res);
		      }
		    ,cols: [[ //标题栏
		      {field: 'courseName', title: '课程名', sort: true}
		      ,{field: 'teaherName', title: '上课教师'}
		      ,{field: 'workId', title: '工号'}
		      ,{field: 'className', title: '课程授课班级'}
		      ,{field: 'documenttype', title: '课程材料类型'}
		      ,{field: 'period', title: '授课学期'}
		      ,{field: 'remark', title: '备注', sort: true}
		    ]]
		    //,data: tableData
		    ,skin: 'line' //表格风格
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [5, 7, 10]
		    ,limit: 5 //每页默认显示的数量 
		    ,id : "documentGrid"
		 })
  }
  
  function showDepartment(){
	  var department = $("#department_name").val();
	  //console.log("teacher:"+$("#teacher_name").val()+"===period:"+$("#period").val());
	  table.render({
		    elem: '#academeGrid'
		    ,url: '/CMA/courseDocument/getDocumentByDepartment'
		    ,where: {
		    	"period" : $("#period").val(),
		    	"department" : department
		    }
		    ,method: 'post' 
		    ,done: function(res, curr, count){
		        //如果是异步请求数据方式，res即为你接口返回的信息。
		        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
		        console.log(res);
		      }
		    ,cols: [[ //标题栏
		      {field: 'courseName', title: '课程名', sort: true}
		      ,{field: 'teaherName', title: '上课教师'}
		      ,{field: 'workId', title: '工号'}
		      ,{field: 'className', title: '课程授课班级'}
		      ,{field: 'documenttype', title: '课程材料类型'}
		      ,{field: 'period', title: '授课学期'}
		      ,{field: 'status', title: '状态', sort: true}
		      ,{field: 'remark', title: '备注', sort: true}
		    ]]
		    //,data: tableData
		    ,skin: 'line' //表格风格
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [5, 7, 10]
		    ,limit: 5 //每页默认显示的数量 
		    ,id : "documentGrid"
		 })
  }

	//生成学期
  //获取当前年份
  var date=new Date;
  var year=date.getFullYear(); 
  var periodText = "";
  for(var i = 0; i < 3; i++){
	  for(var j = 0; j < 2; j++){
		  if(j == 0){
			  periodText = periodText + "<option value='"+year +"-"+ (year+1) +"第一学期'>"+year +"-"+ (year+1) +"第一学期"+"</option>";
		  }else{
			  periodText = periodText + "<option value='"+year +"-"+ (year+1) +"第二学期'>"+year +"-"+ (year+1) +"第二学期"+"</option>";
		  }
	  }
	  year--;
  }
  //console.log(periodText);
  $("#period").append(periodText);
  
  
  
  $.ajax({ 
		url: "/CMA/department/getDepartByUser",
		contentType: "application/x-www-form-urlencoded",
		type:"post",
		dataType : "json",
		success: function(data){
			//console.log(data.data.length);
			var optionData = data.data;
			var optionText = "<option value=''></option>";
			for(var i = 0; i < optionData.length; i++){
				optionText = optionText + "<option value="+optionData[i].id+">"+optionData[i].department+"</option>";
			}
			//console.log("ss"+optionText);
			$("#department_name").append(optionText); 
			form.render('select');
	      }
	  });
  
  $.ajax({ 
		url: "/CMA/course/getAllCourse",
		contentType: "application/x-www-form-urlencoded",
		type:"post",
		dataType : "json",
		success: function(data){
			//console.log(data.data);
			var optionData = data.data;
			var optionText = "<option value=''></option>";
			for(var i = 0; i < optionData.length; i++){
				optionText = optionText + "<option value="+optionData[i].courseid+">"+optionData[i].coursename+"</option>";
			}
			//console.log("ss"+optionText);
			$("#course_name").append(optionText); 
			form.render('select'); 
	      }
	});
});


</script>

</body>
</html>